<template>
    <div class="panel">
        <div class="panel-title">
            <span>{{title.name}}</span>
            <span class="cell-right" style="font-size:.4rem;">{{title.value}}</span>
        </div>
        <div class="panel-content">
            <div class="panel-content-cell" v-for="item in content" :key="item.id">
                <span>{{item.name}}</span>
                <span class="cell-right">{{item.value}}</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        title: Object,
        content: Array
    }
}
</script>
<style lang="less" scoped>
.panel{
    background: #ffffff;
    padding: 0rem .3rem;
    .cell-right{
        float: right;
    }
    .panel-title{
        height: .98rem;
        font-size: .3rem;
        line-height: .98rem;
    }
    .panel-content{
        border-top: 1px solid #cccccc;
        padding: .12rem 0rem;
        font-size: .28rem;
        .panel-content-cell{
            padding: .12rem 0rem;
        }
    }
}

</style>


